<template>
	<view class="content-header">
		<view class="flex-column" v-if="goodsInfo!=null">
			<view class="goodsinfo-img">
				<swiper class="swiper"   :autoplay="true"
				   				:interval="5000" :circular="true" :indicator-color="indicatorColor"
				   				>
				   				<swiper-item v-for="img in goodsInfo.images">
				   					<image class="img" :src="$utils.cdnImg(img)" mode="scaleToFill"></image>
				   				</swiper-item>
				   			</swiper>
				<!-- <image src="../../static/index/goods.png" mode="widthFix"></image> -->
				<view class="flex-column goodsinfo-txt">
					<view>{{goodsInfo.title}}</view>
					<view class="flex-row goodsinfo-txt-top flex-item-center">
						<view class="goodsinfo-txt-name1" v-if="goods_type==0">￥{{goodsInfo.price}}</view>
						<view class="goodsinfo-txt-name1" v-if="goods_type==1">￥{{goodsInfo.price}}</view>
						<view class="goodsinfo-txt-name2" v-if="goods_type==0">￥{{goodsInfo.original_price}}</view>
						<view class="jifen" v-if="goodsInfo.score>0">送{{parseInt(goodsInfo.score)}}积分</view>
						<view class="jifen" v-if="goodsInfo.max_score>0">可用{{parseInt(goodsInfo.max_score)}}积分</view>
					</view>
					<view class="tags flex-row" v-if="goodsInfo.tag.length>0">
						<view v-for="tag in goodsInfo.tag">{{tag.title}}</view>
						<!-- <view>5折</view>
						<view>5折</view> -->
					</view>
					<view class="flex-row flex-content-between goodsinfo-txt1">
						<view>销量：{{goodsInfo.sale_num}}</view>
						<view>库存：{{goodsInfo.inventory}}</view>
					</view>
				</view>
			</view>
			<view class="goodsinfo-top17"></view>
			<view class="goodsinfo-assess" v-if="goodsInfo.comment.length>0">
				<view class="goodsinfo-assess-cen flex-column">
					<view class="goodsinfo-assess-cen-txt1">商品评价</view>
					<view class="flex-row flex-content-between goodsinfo-assess-cen-txt2">
						<view class="flex-row flex-item-center">
							<image class="goodsinfo-assess-cen-img1" :src="$utils.cdnImg(goodsInfo.comment[0].user.avatar)" mode="scaleToFill"></image>
							<view class="goodsinfo-assess-cen-txt3">{{goodsInfo.comment[0].user.nickname}}</view>
						</view>
						<view class="goodsinfo-assess-cen-time">{{goodsInfo.comment[0].createtime}}</view>
					</view>
					<view class="goodsinfo-assess-content">{{goodsInfo.comment[0].content}}</view>
					<view class="goodsinfo-assess-content-show flex-row flex-content-center flex-item-center" @tap="goContentInfo(goodsInfo.id)">
						<view>查看全部</view>
						<image src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="goodsinfo-top20"></view>
			<view class="goodsinfo-detal">
				<view class="flex-column goodsinfo-detal1">
					<view class="goodsinfo-detal-title">商品详情</view>
					<view class="goodsinfo-detal-txt">
						<rich-text :nodes="$utils.htmlToView(goodsInfo.content)"></rich-text>
						<!-- <image class="goodsinfo-detal-img" src="../../static/index/goods.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
			<mu-suspension bottom="0">
				<view class="foot">
					<view class="foot-top flex-row flex-content-between" v-if="goods_type==0">
						<image @tap="toCart" class="foot-img" src="../../static/index/gwc.png" mode="scaleToFill"></image>
						<view class="foot-btn" @tap="payOrder">立即购买</view>
					</view>
					<view v-if="goods_type==1" class="top38">
						<view class="foot-btn-1" @tap="payOrder">立即兑换</view>
					</view>
				</view>
			</mu-suspension>
		</view>
		<attr ref="gouwuces" :attrList="attrList" @confirm="confirm"></attr>
	</view>
</template>

<script>
	import attr from "@/components/attr.vue"
	export default{
		components:{
			attr
		},
		data(){
			return{
				goods_type:0,//商品类型[0=普通商品,1=积分商品]
				goodsId:'',
				goodsInfo:null,
				payType:1,//1=立即购买,2=加入购物车
				attrList:[],
			}
		},
		onLoad(opt) {
			if(opt.goods_type){
				this.goods_type = opt.goods_type
			}
			if(opt.id){
				this.goodsId = opt.id
			}
			this.getGoodsInfo();
		},
		methods:{
			//添加到购物车
			confirm(e){
				console.log(e);
				let that = this;
				if(this.payType==2){
					let data = {
						cart:[
							{
								mumerchant_goods_id:this.goodsInfo.id,
								mumerchant_goods_item_id:e.data.id,
								num:e.num
							}
						],
						type:'add'
					}
					this.$api.changeShopCart(data).then(res=>{
						that.$store.dispatch("getCartList")
						that.$utils.showMessage("添加到购物车成功")
					})
				}else{
					let data = [
						{
							mumerchant_goods_id:this.goodsInfo.id,
							mumerchant_goods_item_id:e.data.id,
							num:e.num
						}
					]
					console.log(data);
					uni.navigateTo({
						url:'/pages/order/create_order?goods_type='+this.goods_type+"&goods_info="+encodeURIComponent(JSON.stringify(data))
					})
				}
				
			},
			//跳转到评论详情
			goContentInfo(id){
				uni.navigateTo({
					url:'/pages/order/comment?id='+id
				})
			},
			//获取商品详情
			getGoodsInfo(){
				let that = this;
				let data = {
					id:this.goodsId
				}
				this.$api.getGoodsInfo(data).then(res=>{
					console.log(res);
					that.goodsInfo = res;
					that.attrList = res.goodsitem
				})
			},
			//跳转到立即购买
			payOrder(){
				this.payType = 1;
				this.$refs.gouwuces.open();
				// uni.navigateTo({
				// 	url:'/pages/order/create_order?goods_type='+goods_type
				// })
			},
			//添加到购物车
			toCart(){
				this.payType = 2
				this.$refs.gouwuces.open();
			}
		}
	}
</script>

<style lang="scss">
	.jifen{
		font-size: 14rpx;
		color: #00aa7f;
		margin-left: 5rpx;
		margin-left: 20rpx;
	}
	img{
		width: 100%;
	}
	.tags{
		margin-top: 13rpx;
		>view{
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1rpx solid #FF5000;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF5000;
			padding: 3rpx 10rpx 3rpx 10rpx;
			margin-right: 15rpx;
		}
	}
	.img{
		width: 750rpx;
	}
	.swiper-item{
		width: 750rpx;
	}
	.swiper{
		width: 750rpx;
		height: 500rpx;
	}
	.top38{
		padding-top: 38rpx;
	}
	.foot-btn{
		width: 517rpx;
		height: 80rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 80rpx;
		margin-right: 30rpx;
	}
	.foot-btn-1{
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		text-align: center;
		line-height: 80rpx;
		margin-left: 30rpx;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 80rpx;
		margin-right: 30rpx;
	}
	.foot-img{
		width: 45rpx;
		height: 45rpx;
		margin-top: 18rpx;
	}
	.foot{
		width: 750rpx;
		height: 184rpx;
		background-color: #FFFFFF;
	}
	.foot-top{
		margin-left: 56rpx;
		padding-top: 38rpx;
	}
	.goodsinfo-detal-img{
		width: 100%;
	}
	.goodsinfo-detal-txt{
		margin-top: 26rpx;
		width: 100%;
	}
	.goodsinfo-detal-title{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.goodsinfo-detal{
		
		background: #FFFFFF;
		padding-bottom: 184rpx;
	}
	.goodsinfo-detal1{
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}
	.goodsinfo-assess-content-show{
		line-height: 77rpx;
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>image:nth-child(2){
			width: 11rpx;
			height: 16rpx;
			margin-left: 9rpx;
		}
	}
	.goodsinfo-assess-content{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 24rpx;
		width: 690rpx;
		border-bottom: 2rpx solid #EFEFEF;
		padding-bottom: 30rpx;
	}
	.goodsinfo-assess-cen-time{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.goodsinfo-assess-cen-img1{
		width: 62rpx;
		height: 62rpx;
		border-radius: 31rpx 31rpx 31rpx 31rpx;
	}
	.goodsinfo-assess-cen-txt1{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.goodsinfo-assess-cen-txt2{
		margin-top: 40rpx;
	}
	.goodsinfo-assess-cen-txt3{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 14rpx;
	}
	.goodsinfo-assess-cen{
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.goodsinfo-assess{
		width: 750rpx;
		height: 338rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}
	.goodsinfo-top17{
		width: 750rpx;
		height: 17rpx;
	}
	.goodsinfo-top20{
		width: 750rpx;
		height: 20rpx;
	}
	.goodsinfo-txt1{
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>view:nth-child(2){
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	.goodsinfo-txt-name1{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FF5000;
	}
	.goodsinfo-txt-name2{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-decoration: line-through;
		margin-left: 15rpx;
	}
	.goodsinfo-txt-top{
		margin-top: 30rpx;
	}
	.goodsinfo-txt{
		margin-left: 30rpx;
		margin-right: 30rpx;
		>view:nth-child(1){
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 30rpx;
		}
	}
	.goodsinfo-img{
		width: 750rpx;
		background: #FFFFFF;
		>image{
			width: 750rpx;
		}
	}
</style>